<template>
  <BasicTabs v-model="tabname" :tabs="tabs"  @tabChange="tabsChange"> </BasicTabs>
</template>

<script setup lang="ts">
  import { TabPaneItem } from '@/components/ui/basic-tabs/types'
  import GroupStatus from '../components/tabComponents/groupStatus.vue'
  import MachineDetail from '../components/tabComponents/machineDetail.vue'
  import BucketStatistics_PreDrawing from '../components/tabComponents/pre_final-drawing/bucketStatistics_Combine.vue'
  import AbnormalAnalysis from '../components/tabComponents/abnormalAnalysis.vue'
  import BucketParking from '../components/tabComponents/pre_final-drawing/bucketParking.vue'
  import ChangeSettings from '../components/tabComponents/changeSettings.vue'
  import HistoricalTrendChart from '../components/tabComponents/historicalTrendChart/index.vue'

  const tabname = ref()
  const tabs = shallowRef<TabPaneItem[]>([
    {
      name: '11810',
      label: '状态总览',
      roles: ['11810'],
      slots: { default: h(GroupStatus, { statusCode: '11810', processName: '预并' }) }
    },
    {
      name: '11820',
      label: '单机详情',
      roles: ['11820'],
      slots: { default: h(MachineDetail, { statusCode: '11820', processName: '预并' }) }
    },
    {
      name: '11830',
      label: '条桶统计',
      roles: ['11830'],
      slots: {
        default: h(BucketStatistics_PreDrawing, { statusCode: '11830', processName: '预并' })
      }
    },
    {
      name: '11840',
      label: '异常分析',
      roles: ['11840'],
      slots: {
        default: h(AbnormalAnalysis, { statusCode: '11840', processName: '预并' })
      }
    },
    {
      name: '11870',
      label: '条桶-停车',
      roles: ['11870'],
      slots: {
        default: h(BucketParking, { statusCode: '11870', processName: '预并' })
      }
    },
    {
      name: '11860',
      label: '设置变更',
      roles: ['11860'],
      slots: { default: h(ChangeSettings, { statusCode: '11860', processName: '预并' }) }
    },
    {
      name: '11850',
      label: '历史趋势图',
      roles: ['11850'],
      slots: { default: h(HistoricalTrendChart, { statusCode: '11850', processName: '预并' }) }
    }
  ])

  const tabsChange = (tab) => {
    console.log(tab)
  }
</script>
